<template>
  <div class="safe-center-container">
    <h2>安全中心</h2>
    <ul>
      <li>
        <span class="label">密码</span>
        <span class="account">******</span>
        <span class="btn">修改密码</span>
      </li>
      <li>
        <span class="label">邮箱</span>
        <span class="account">{{ superUserBindAccount.email || '未绑定' }}</span>
        <span v-if="superUserBindAccount.email" class="btn" @click="untieEmailVisible = true">解绑</span>
        <span v-else class="btn" @click="bindEmailVisible = true">绑定</span>
      </li>
    </ul>
    <el-dialog v-dialogDrag title="绑定邮箱" :visible.sync="bindEmailVisible" width="20%" :close-on-click-modal="false">
      <bind-email v-if="bindEmailVisible" @reset-data="resetData" />
    </el-dialog>
    <el-dialog v-dialogDrag title="解绑邮箱" :visible.sync="untieEmailVisible" width="20%" :close-on-click-modal="false">
      <untie-email v-if="untieEmailVisible" :email="superUserBindAccount.email" @reset-data="resetData" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getSuperUserBindAccount } from '@/api/super_user'
import BindEmail from './BindEmail'
import UntieEmail from './UntieEmail'
export default {
  name: 'SafeCenter',
  components: { BindEmail, UntieEmail },
  props: {},
  data () {
    return {
      superUserBindAccount: {},
      bindEmailVisible: false,
      untieEmailVisible: false
    }
  },
  computed: { ...mapGetters(['SUPER_USER_INFO']) },
  watch: {},
  created () {
    this.getSuperUserBindAccount()
  },
  mounted () {},
  methods: {
    getSuperUserBindAccount: async function () {
      const data = {
        'username': this.SUPER_USER_INFO.username
      }
      const res = await getSuperUserBindAccount(data)
      if (res) {
        this.superUserBindAccount = res
      }
    },
    resetData: function () {
      this.bindEmailVisible = false
      this.untieEmailVisible = false
      this.getSuperUserBindAccount()
    }
  }
}
</script>

<style scoped lang="scss">
.safe-center-container {
  padding-left: 20px;
  h2 {
    color: var(--main-color);
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
  ul {
    li {
      display: flex;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid #f1f1f1;
      font-size: 14px;
      .label {
        flex: 1;
        color: var(--main-color);
      }
      .account {
        flex: 8;
        color: #909090;
        font-size: 12px;
      }
      .btn {
        flex: 1;
        color: #007fff;
        cursor: pointer;
      }
    }
  }
  ::v-deep .el-dialog__body {
    padding-top: 10px;
  }
}
</style>
